<template>
    <view class="goods-area" v-show="isShow">
        <view class="goods-main">
            <!--菜品分类-->
            <scroll-view id="classify" scroll-with-animation="true" scroll-y="true" :scroll-top="classifyScrollTop" class="classify">
                <view :class="{item:true, active:item.active}" v-for="(item,index) in classifys" :key="item.cid" @click="clickClassify(index)">
                    <view>{{item.title}}</view>
                </view>
                <view style="height:170rpx;"></view>
            </scroll-view>
            <!--菜品展示-->
            <scroll-view scroll-y="true" id="goods-wrap" class="goods-wrap" scroll-with-animation="true" :scroll-top="goodsScrollTop" @scroll="eventGoodsScroll">
                <view class="goods-classify">
                    <block v-for="(item,index) in goods" :key="item.cid">
                        <view class="goods-classify-wrap">
                            <view class="classify-name" :style="{position:item.position,left:item.left+'px',top:item.top+'px',zIndex:10}">{{item.title}}</view>
                            <view class="goods-list-wrap">
                                <view class="goods-list" v-for="(item2,index2) in item.goods" :key="item2.gid" @click="showGoodsDetails(item2.gid,item2.is_meal,item2.amount,item2.sell_status,item2.stock)">
                                    <view class="image"><image :lazy-load="true" :src="item2.image"></image></view>
                                    <view class="goods-info">
                                        <view class="goods-title">{{item2.title}}</view>
                                        <view class="sales">销量：{{item2.sales}}</view>
                                        <!--如果是套餐-->
                                        <view class="meal" v-if="item2.is_meal=='1'">
                                            <view class="price">￥15</view>
                                            <view class="meal-buy">购买</view>
                                        </view>
                                        <!--如果非套餐-->
                                        <view class="price-wrap" v-else>
                                            <view class="price">￥{{item2.price}}</view>
                                            <view class="amount">
                                                <!--如果没有库存-->
                                                <template v-if="item2.stock<=0">
                                                    <view class="handle-amount">
                                                        <text>已售光</text>
                                                    </view>
                                                </template>
                                                <!--
                                                如果菜品售卖在全部时间段
                                                -->
                                                <template v-else-if="item2.sell_time_type=='0'">
                                                    <view class="handle-amount">
                                                        <!--如果数量大于0，显示减号-->
                                                        <view class="dec" v-if="item2.amount>0" @click.stop="decAmount(item2.gid,item2.new_meal_items,item2.meal_items)"></view>
                                                        <!--
                                                        为了防止scroll-view组件内使用input卡顿的问题，先使用view组件显示数量，单击该组件，显示input输入框，并隐藏view组件，输入完成后使用@blur事件，隐藏input组件，显示view组件
                                                        -->
                                                        <view class="text" v-if="item2.amount>0 && !item2.isAmountInput" @click.stop="showAmountInput(index,index2)">{{item2.amount}}</view>
                                                        <input  :value="item2.amount" v-if="item2.isAmountInput" :focus="item2.isAmountInputFocus" type="number" @blur="setAmount($event,item2.gid,item2.new_meal_items,item2.meal_items,index,index2)" />
                                                        <view class="inc" @click.stop="incAmount(item2.gid,item2.new_meal_items,item2.meal_items)"></view>
                                                    </view>
                                                </template>
                                                <!--
                                                如果菜品售卖在自定义时间段
                                                -->
                                                <template v-else>
                                                    <!--在售卖期-->
                                                    <template v-if="item2.sell_status=='1'">
                                                        <view class="handle-amount">
                                                            <view class="dec" v-if="item2.amount>0"></view>
                                                            <view class="text" v-if="item2.amount>0 && !item2.isAmountInput" @click.stop="showAmountInput(index,index2)">{{item2.amount}}</view>
                                                        <input  :value="item2.amount" v-if="item2.isAmountInput" :focus="item2.isAmountInputFocus" type="number" />
                                                            <view class="inc" @click.stop="incAmount(item2.gid,item2.new_meal_items,item2.meal_items)"></view>
                                                        </view>
                                                    </template>
                                                    <template v-else>
                                                        <text>非可售时间</text>
                                                    </template>
                                                </template>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
                <view style="width:100%;height:190rpx;"></view>
            </scroll-view>
        </view>
        <goods-details :show="isShowGoodsDetails" @close="isShowGoodsDetails=false" :branchShopId="branchShopId" :gid="gid" :amount="amount" @incAmount="incAmount" @decAmount="decAmount" @setAmount="setAmount"></goods-details>
    </view>
</template>

<script>
    import {mapMutations} from "vuex";
    import GoodsDetails from "../../components/goods/details";
    export default {
        name: "goods-component",
        data(){
            return {
                classifys:[],//菜品分类
                goods:[],//菜品
                goodsScrollTop:0,
                classifyScrollTop:0,
                isShowGoodsDetails:false//是否显示菜品详情组件
            }
        },
        props:{
            //是否显示菜品组件
            isShow:{
                type:Boolean,
                default:false
            },
            //菜品分类
            classifysData:{
                type:Array,
                default:()=>[]
            },
            //菜品
            goodsData:{
                type:Array,
                default:()=>[]
            },
            //菜品的id
            gid:{
                type:String,
                default:""
            },
            //是否有上架或下架的菜品
            shelfGoods:{
                type:Boolean,
                default:false
            },
            //分店的id
            branchShopId:{
                type:String,
                default:""
            },
            //菜品数量
            amount:{
                type:Number,
                default:0
            }
        },
        mounted(){
            this.goodsWrapTop=0;
            this.goodsWrapLeft=0;
            this.goodsWrapHeight=0;
            this.tmpGoodsScrollTop=0;
            this.goodsObj={};
            this.firstWatchGoods=true;//第一次监听watch的goods发生变化
            if(this.goodsData && this.goodsData.length>0){
                this.goods=this.goodsData;
            }
            if(this.classifysData && this.classifysData.length>0){
                this.classifys=this.classifysData;
            }
        },
        watch:{
            //监听菜品分类
            classifysData(val){
                this.classifys=val;
            },
            //监听菜品
            goodsData(val){
                this.goods=val;
            },
            goods(){
                if(this.firstWatchGoods){
                    this.firstWatchGoods=false;
                     //获取菜品的位置
                    this.getGoodsPosition();
                }
            },
            classifys(){
                //获取菜品分类的位置
                this.getClassifyPosition();
            },
            shelfGoods(val){
                if(val){
                    this.goodsScrollTop=0;
                    this.classifyScrollTop=0;
                }
            }
        },
        methods:{
            ...mapMutations({
                SET_GOODS_POSITION:"goods/SET_GOODS_POSITION"
            }),
            //点击左侧菜品分类
            clickClassify(index){
                if(this.classifys.length>0){
                    for(let i=0;i<this.classifys.length;i++){
                        if(this.classifys[i].active){
                            this.classifys[i].active=false;
                            break;
                        }
                    }
                    this.classifys[index].active=true;
                    this.$set(this.classifys,index,this.classifys[index]);
                    this.goodsScrollTop=this.tmpGoodsScrollTop;
                    setTimeout(()=>{
                        this.goodsScrollTop=this.classifys[index].goodsTop-30;
                    },50)
                }
            },
            //获取菜品的位置
            getGoodsPosition(){
                let goodsWrap=uni.createSelectorQuery().in(this).select("#goods-wrap");
                goodsWrap.boundingClientRect(data=>{
                    this.goodsWrapTop=data.top;
                    this.goodsWrapLeft=data.left;
                    this.goodsWrapHeight=data.height;
                    let goodsClassifyWrap=uni.createSelectorQuery().in(this).selectAll(".goods-classify-wrap");
                    goodsClassifyWrap.boundingClientRect(data=>{
                        if(data.length>0){
                            let goodsTop=0;
                            for(let i=0;i<data.length;i++){
                                goodsTop=data[i].top-this.goodsWrapTop;
                                this.classifys[i].goodsTop=goodsTop;
                                this.classifys[i].goodsHeight=data[i].height;
                                this.goods[i].top=goodsTop;
                            }

                            //获取每个菜品的top
                            let goodsList=uni.createSelectorQuery().in(this).selectAll(".goods-list");
                            goodsList.boundingClientRect(data=>{
                                if(data.length>0){
                                    let itemIndex=0;
                                    for(let i=0;i<this.goods.length;i++){
                                        for(let j=0;j<this.goods[i].goods.length;j++){
                                            this.goods[i].goods[j].itemTop=data[itemIndex].top;
                                            itemIndex++;
                                            let gid=this.goods[i].goods[j].gid;
                                            //将菜品的gid和值存放到this.goodsObj中，目的为了从菜品搜索页面进入点餐页面的菜品定位
                                            this.goodsObj[gid]=this.goods[i].goods[j].itemTop;
                                        }
                                    }
                                    //定位菜品的位置
                                    this.setItemPosition();
                                }
                            }).exec();
                        }
                    }).exec();
                }).exec();
            },
            //定位菜品的位置
            setItemPosition(){
                if(this.gid && this.goods.length>0){
                    let itemTop=this.goodsObj[this.gid];
                    setTimeout(()=>{
                        this.goodsScrollTop=itemTop-this.goodsWrapTop*1.2;
                    },50)
                }
            },
            //监听菜品滚动事件
            eventGoodsScroll(e){
                if(this.classifys.length>0){
                    this.tmpGoodsScrollTop=e.detail.scrollTop;
                    for(let i=0;i<this.classifys.length;i++){
                        //菜品在可视区域内
                        if(e.detail.scrollTop>=this.classifys[i].goodsTop-90 && e.detail.scrollTop<=this.classifys[i].goodsTop+this.classifys[i].goodsHeight){
                            //将菜品不在可视区域的active设置为false
                            for(let key in this.classifys){
                                if(this.classifys[key].active){
                                    this.classifys[key].active=false;
                                    break;
                                }
                            }

                            //计算是否滚动到底部
                            if(parseInt(e.detail.scrollTop/e.detail.scrollHeight*100)>=92){
                                this.classifys[this.classifys.length-1].active=true;
                            }else{
                                this.classifys[i].active=true;
                            }

                            //菜品分类滚动到相应的菜品位置
                            this.classifyScrollTop=this.classifys[i].top;

                            if(this.goods && this.goods.length>0){
                                //将非可视区域的菜品的分类标题设置成static
                                for(let key in this.goods){
                                    if(this.goods[key].position=='fixed'){
                                        this.goods[key].position="static";
                                        this.goods[key].top=0;
                                        this.goods[key].left=0;
                                        this.SET_GOODS_POSITION({index:key,position:"static",top:0,left:0});
                                        break;
                                    }
                                }

                                //将可视区域的菜品的分类标题设置成固定定位
                                this.goods[i].position="fixed";
                                this.goods[i].top=this.goodsWrapTop;
                                this.goods[i].left=this.goodsWrapLeft;
                                this.SET_GOODS_POSITION({index:i,position:"fixed",top:this.goodsWrapTop,left:this.goodsWrapLeft});
                                
                                //快要滚动到顶部，清除所有固定定位
                                if(e.detail.scrollTop<=100){
                                    for(let key in this.goods){
                                        if(this.goods[key].position=='fixed'){
                                            this.goods[key].position="static";
                                            this.goods[key].top=0;
                                            this.goods[key].left=0;
                                            this.SET_GOODS_POSITION({index:key,position:"static",top:0,left:0});
                                            break;
                                        }
                                    }
                                }

                            }
                        }
                    }
                }
            },
            //获取菜品分类的位置
            getClassifyPosition(){
                let classify=uni.createSelectorQuery().in(this).select("#classify");
                classify.boundingClientRect(data=>{
                    let classifyTop=data.top;
                    let classifyItem=uni.createSelectorQuery().in(this).selectAll("#classify .item");
                    classifyItem.boundingClientRect(data=>{
                        if(data.length>0){
                            for(let i=0;i<data.length;i++){
                                this.classifys[i].top=data[i].top-classifyTop;
                            }
                        }
                    }).exec()
                }).exec();
            },
            //显示菜品详情组件
            showGoodsDetails(gid,isMeal,amount,sellStatus,stock){
                //如果在售卖期并且有库存
                if(sellStatus=='1' && stock>0){
                    if(isMeal!=='1'){//非套餐
                        this.isShowGoodsDetails=true;
                    }
                    this.$emit("showGoodsDetails",gid,isMeal,amount,sellStatus,stock);
                }
            },
            //增加数量
            incAmount(gid,newMealItems,mealItems){
                this.$emit("incAmount",gid,newMealItems,mealItems);
            },
            //减少数量
            decAmount(gid,newMealItems,mealItems){
                this.$emit("decAmount",gid,newMealItems,mealItems);
            },
            //显示input输入框
            showAmountInput(index,index2){
                this.$emit("showAmountInput",index,index2);
            },
            //更新数量
            setAmount(e,gid,newMealItems,mealItems,index,index2){
                this.$emit("setAmount",e,gid,newMealItems,mealItems,index,index2);
            }
        },
        components:{
            GoodsDetails
        }
    }
</script>

<style scoped>
    .goods-area{width:100%;}
    .goods-main{width:100%;height:70vh;overflow:hidden;display:flex;justify-content: space-between;}
    .goods-main .classify{height:90%;width:156rpx;background-color:#fafafa;}
    .goods-main .classify .item{width:100%;height:72rpx;overflow:hidden;margin-bottom:40rpx;position: relative;z-index:1;}
    .goods-main .classify .item view{width:80%;font-size:28rpx;color:#999999;position:absolute;z-index:1;left:50%;top:50%;transform: translate(-50%,-50%)}
    .goods-main .classify .item.active{background-color:#FFFFFF;}
    .goods-main .classify .item.active view{color:#333333}

    .goods-main .goods-wrap{width:76%;height:90%;}
    .goods-main .goods-classify{width:100%;}
    .goods-main .goods-classify .classify-name{width:100%;height:auto;font-size:28rpx;color:#333333;font-weight: bold;background-color:#FFFFFF;}
    .goods-main .goods-list-wrap{width:100%;height:auto;margin-bottom:20rpx;}
    .goods-main .goods-list-wrap .goods-list{width:100%;height:auto;display:flex;justify-content: space-between;margin-top:40rpx;align-items: center}
    .goods-main .goods-list-wrap .goods-list .image{width:180rpx;height:180rpx;border-radius: 6px;}
    .goods-main .goods-list-wrap .goods-list .image image{width:100%;height:100%;border-radius: 6px;}
    .goods-main .goods-list .goods-info{width:62%;height:auto;margin-right:20rpx;}
    .goods-main .goods-list .goods-title{width:100%;height:80rpx;overflow:hidden;font-size:28rpx;color:#333333;font-weight: bold;}
    .goods-main .goods-list .sales{font-size:24rpx;color:#999999;margin-top:10rpx;}
    .goods-main .goods-list .points{font-size:24rpx;color:#D6001C;margin-top:10rpx;}
    .goods-main .goods-list .price{font-size:28rpx;color:#fb4e44;font-weight: bold;}
    .goods-main .goods-list .price-wrap{width:100%;margin-top:10rpx;display:flex;justify-content: space-between;}
    .goods-main .goods-list .meal{width:100%;margin-top:10rpx;display:flex;justify-content:space-between;}
    .goods-main .goods-list .meal .meal-buy{width:110rpx;height:50rpx;background-color:#D6001C;color:#FFFFFF;text-align:center;line-height:50rpx;font-size:28rpx;border-radius: 4px;}
    .goods-main .goods-list .amount{width:auto;height:auto;display:flex;}
    .goods-main .goods-list .amount text{font-size:24rpx;color:#999999;}
    .goods-main .goods-list .handle-amount{width:auto;height:60rpx;display:flex;align-items: center;justify-content:flex-end}
    .goods-main .goods-list .handle-amount .dec{width:55rpx;height:55rpx;background-image:url("~@/static/images/main/dec.png");background-size:100%;background-position: center;background-repeat: no-repeat;}
    .goods-main .goods-list .handle-amount .inc{width:55rpx;height:55rpx;background-image:url("~@/static/images/main/inc.png");background-size:100%;background-position: center;background-repeat: no-repeat;}
    .goods-main .goods-list .handle-amount .text{font-size:28rpx;color:#333333;margin-right:10rpx;margin-left:10rpx;width:50rpx;text-align: center;}
    .goods-main .goods-list .start-sell{width:100%;height:auto;font-size:24rpx;color:#999999;}
    .goods-main .goods-list .handle-amount input{width:50rpx;height:100%;text-align: center;margin-right:10rpx;margin-left:10rpx;}
</style>
